<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>技术栈示意图</title>
<style>
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        background-color: #f8f9fa;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
    }
    .svg-container {
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        background-color: #ffffff;
        padding: 20px;
    }
</style>
</head>
<body>

<div class="svg-container">
    <svg width="920" height="660" xmlns="http://www.w3.org/2000/svg">
        <!-- 定义渐变 -->
        <defs>
            <linearGradient id="gradBackend" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#e3f2fd;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#bbdefb;stop-opacity:1" />
            </linearGradient>
            <linearGradient id="gradFrontend" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#e8f5e9;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#c8e6c9;stop-opacity:1" />
            </linearGradient>
            <linearGradient id="gradIDE" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#fff3e0;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#ffe0b2;stop-opacity:1" />
            </linearGradient>
        </defs>

        <!-- Main Title -->
        <text x="460" y="45" font-size="26" font-weight="bold" text-anchor="middle" fill="#343a40">开发框架与技术栈</text>
        <line x1="250" y1="65" x2="670" y2="65" stroke="#dee2e6" stroke-width="2"/>

        <!-- Backend Column -->
        <g id="backend">
            <rect x="20" y="90" width="300" height="550" rx="12" ry="12" fill="url(#gradBackend)" stroke="#90caf9" stroke-width="1.5"/>
            <text x="170" y="125" font-size="20" font-weight="bold" text-anchor="middle" fill="#1976d2">后端技术 (Backend)</text>
            
            <text x="40" y="165" font-size="15" font-weight="600" fill="#1565c0">主框架:</text>
            <text x="55" y="190" font-size="15" fill="#424242">Spring Boot, Spring Cloud</text>
            
            <text x="40" y="225" font-size="15" font-weight="600" fill="#1565c0">语言:</text>
            <text x="55" y="250" font-size="15" fill="#424242">Java, Python</text>

            <text x="40" y="285" font-size="15" font-weight="600" fill="#1565c0">数据库:</text>
            <text x="55" y="310" font-size="15" fill="#424242">达梦, MySQL, PostgreSQL, TDSQL</text>

            <text x="40" y="345" font-size="15" font-weight="600" fill="#1565c0">向量数据库:</text>
            <text x="55" y="370" font-size="15" fill="#424242">Milvus, FAISS</text>

            <text x="40" y="405" font-size="15" font-weight="600" fill="#1565c0">消息队列:</text>
            <text x="55" y="430" font-size="15" fill="#424242">RabbitMQ, Kafka</text>

            <text x="40" y="465" font-size="15" font-weight="600" fill="#1565c0">缓存:</text>
            <text x="55" y="490" font-size="15" fill="#424242">Redis, CRedis, Ehcache</text>

            <text x="40" y="525" font-size="15" font-weight="600" fill="#1565c0">日志管理:</text>
            <text x="55" y="550" font-size="15" fill="#424242">ELK Stack (Elasticsearch, Logstash, Kibana)</text>

            <text x="40" y="585" font-size="15" font-weight="600" fill="#1565c0">API 网关:</text>
            <text x="55" y="610" font-size="15" fill="#424242">Spring Cloud Gateway, Zuul</text>
        </g>

        <!-- Frontend Column -->
        <g id="frontend">
            <rect x="340" y="90" width="280" height="320" rx="12" ry="12" fill="url(#gradFrontend)" stroke="#a5d6a7" stroke-width="1.5"/>
            <text x="480" y="125" font-size="20" font-weight="bold" text-anchor="middle" fill="#388e3c">前端技术 (Frontend)</text>
            
            <text x="360" y="165" font-size="15" font-weight="600" fill="#2e7d32">主框架:</text>
            <text x="375" y="190" font-size="15" fill="#424242">React, Vue.js, Angular</text>

            <text x="360" y="225" font-size="15" font-weight="600" fill="#2e7d32">UI 组件库:</text>
            <text x="375" y="250" font-size="15" fill="#424242">Ant Design, Element UI</text>

            <text x="360" y="285" font-size="15" font-weight="600" fill="#2e7d32">开发工具:</text>
            <text x="375" y="310" font-size="15" fill="#424242">Webpack, Babel, ESLint</text>
            
            <text x="360" y="345" font-size="15" font-weight="600" fill="#2e7d32">浏览器支持:</text>
            <text x="375" y="370" font-size="15" fill="#424242">360极速, Firefox, Google Chrome</text>
        </g>

        <!-- IDE Plugin Column -->
        <g id="ide">
            <rect x="640" y="90" width="260" height="320" rx="12" ry="12" fill="url(#gradIDE)" stroke="#ffcc80" stroke-width="1.5"/>
            <text x="770" y="125" font-size="20" font-weight="bold" text-anchor="middle" fill="#f57c00">IDE 插件开发</text>
            
            <text x="660" y="165" font-size="15" font-weight="600" fill="#e65100">VSCode 插件:</text>
            <text x="675" y="190" font-size="15" fill="#424242">TypeScript</text>
            <text x="675" y="215" font-size="15" fill="#424242">VSCode 扩展 API</text>

            <text x="660" y="255" font-size="15" font-weight="600" fill="#e65100">IntelliJ IDEA 插件:</text>
            <text x="675" y="280" font-size="15" fill="#424242">Java or Kotlin</text>
            <text x="675" y="305" font-size="15" fill="#424242">IntelliJ 平台 API</text>
        </g>
    </svg>
</div>

</body>
</html>

